 <template>
 <!--分页 begin-->
 <div style="padding:10px 20px;" class="overflowY">
   <base-card title="拖拽上传">
     <div class="uploadDrags">
       <el-upload
         class="upload-demo"
         drag
         action="https://jsonplaceholder.typicode.com/posts/"
         multiple>
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
       </el-upload>
     </div>
   </base-card>

   <base-card title="说明">
     <code style="margin-top: 15px;">
       <span style="width: 100%;display: inline-block;">1、使用 before-upload 限制用户上传的图片格式和大小</span>
       <span style="width: 100%;display: inline-block;">2、on-success	文件上传成功时的钩子</span>
       <span style="width: 100%;display: inline-block;">3、on-error	文件上传失败时的钩子</span>
       <span style="width: 100%;display: inline-block;">4、on-progress	文件上传时的钩子</span>
       <span style="width: 100%;display: inline-block;">4、on-remove	文件列表移除文件时的钩子</span>
       <span style="width: 100%;display: inline-block;">5、on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用</span>
       <span style="width: 100%;display: inline-block;">6、before-upload	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。</span>
       <span style="width: 100%;display: inline-block;">7、before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。</span>
       <span style="width: 100%;display: inline-block;">8、list-type	文件列表的类型 （参数：text/picture/picture-card）</span>
       <span style="width: 100%;display: inline-block;">9、auto-upload	是否在选取文件后立即进行上传</span>
       <span style="width: 100%;display: inline-block;">10、file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]</span>
       <span style="width: 100%;display: inline-block;">11、拖拽区域的宽度通过 uploadDrags 类名进行调整（修改style里面的uploadDrags类的宽度即可修改）</span>
     </code>
   </base-card>
   <base-card title="HTML">
     <pre><code>&lt;div class="uploadDrags"&gt;<br>    &lt;el-upload<br>      class="upload-demo"<br>      drag<br>      action="https://jsonplaceholder.typicode.com/posts/"<br>      multiple&gt;<br>      &lt;i class="el-icon-upload"&gt;&lt;/i&gt;<br>      &lt;div class="el-upload__text"&gt;将文件拖到此处，或&lt;em&gt;点击上传&lt;/em&gt;&lt;/div&gt;<br>      &lt;div class="el-upload__tip" slot="tip"&gt;只能上传jpg/png文件，且不超过500kb&lt;/div&gt;<br>    &lt;/el-upload&gt;<br>&lt;/div&gt;</code></pre>
   </base-card>
   <base-card title="JS">
     <pre><code>import BaseCard from '@/components/BaseCard/BaseCard'<br>export default {<br>  components: {<br>    BaseCard<br>  },<br>  data() {<br>    return {<br>      fileList: [<br>        { name: 'food.jpeg',<br>          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'<br>        },<br>        { name: 'food2.jpeg',<br>          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'<br>        }<br>      ]<br>    }<br>  },<br>  methods: {<br>    handleRemove(file, fileList) {<br>      console.log(file, fileList)<br>    },<br>    handlePreview(file) {<br>      console.log(file)<br>    }<br>  }<br>}</code></pre>
   </base-card>
   <base-card title="CSS">
     <pre><code>&lt;style scoped&gt;<br>   .uploadDrags{<br>     width: 360px;<br>   }<br>   .upload-demo &gt;&gt;&gt; .el-upload--text{width: 360px !important;}<br>&lt;/style&gt;</code></pre>
   </base-card>
 </div>
 <!--分页 end-->
</template>

<script>
import BaseCard from '@/components/BaseCard/BaseCard'
export default {
  components: {
    BaseCard
  },
  data() {
    return {
      fileList: [
        { name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
        { name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ]
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    }
  }
}
</script>
 <style scoped>
   .uploadDrags{
     width: 360px;
   }
   .upload-demo >>> .el-upload--text{width: 360px !important;}
 </style>

